<breadcrumb />

<mat-card>
  <mat-card-content>
    <section>
      <h2>Checkbox without label</h2>
      <mat-checkbox aria-label="A single checkbox with no label example" />
    </section>
    <section>
      <h2>Standalone checkbox</h2>
      <div>
        <mat-checkbox>Yes, I agree to the terms and conditions</mat-checkbox>
      </div>
      <div>
        <mat-checkbox [disabled]="true">
          No, I do not agree to the terms and conditions
        </mat-checkbox>
      </div>
      <div>
        <mat-checkbox [indeterminate]="true">A partially done task</mat-checkbox>
      </div>
    </section>

    <section>
      <h2>Nested checklist</h2>
      @for (task of tasks; track $index) {
        <div>
          <mat-checkbox
            [(ngModel)]="task.completed"
            [checked]="allComplete(task)"
            [indeterminate]="someComplete(task.subtasks!)"
            (change)="setAllCompleted(task.subtasks!, $event.checked)"
          >
            {{ task.name }}
          </mat-checkbox>
          <div class="demo-sub-list">
            @for (subtask of task.subtasks; track $index) {
              <div>
                <mat-checkbox [(ngModel)]="subtask.completed">{{ subtask.name }}</mat-checkbox>
              </div>
            }
          </div>
        </div>
      }
    </section>

    <section>
      <h2>Colored checkboxes</h2>
      <mat-checkbox color="primary">Primary</mat-checkbox>
      <mat-checkbox color="accent">Accent</mat-checkbox>
      <mat-checkbox color="warn">Warn</mat-checkbox>
    </section>
  </mat-card-content>
</mat-card>
